<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        .box{
            width: 500px;
            height: 100%;
            margin: 0 auto;
        }

        .content{
            height: 85%;
            width: 100%;
            background-color: greenyellow;
            overflow: auto;
        }

        .message{
            width: 100%;
            height: 15%;
        }

        .message input:nth-child(1){
            width: 70%;
            height: 100%;
            background-color: white;
        }

        .message input:nth-child(2){
            width: 29%;
            height: 100%;
            background-color: darkgrey;
        }

        .my{
            width: 100%;
            height: 30px;
            font:18px/30px 微软雅黑;
            color: black;
            text-align: right;
            background-color: #0099cc;
        }

        .other{
            width: 100%;
            height: 30px;
            font:18px/30px 微软雅黑;
            color: black;
            text-align: left;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="content"></div>
        <div class="message">
            <input type="text"><input type="button" value="发送">
        </div>
    </div>

    <script type="text/javascript" src="ajax_tool.js"></script>
    <script type="text/javascript">

        document.querySelector(".message input:nth-child(2)").onclick = function () {
            var msg = document.querySelector(".message input:nth-child(1)").value;

            //自定义一个div添加到消息界面上去，同时设置好，条目的样式
            var myDiv = document.createElement('div');
            myDiv.classList.add('my');
            myDiv.innerHTML = msg;
            document.querySelector('.content').appendChild(myDiv);

            /*ajaxAll(qq.php,msg,'post',function (data) {
                //同时设置收到异步消息后，条目在界面上面展示的样式
                var otherDiv = document.createElement('div');
                otherDiv.classList.add('other');
                var jsonArr = JSON.parse(data);
                for(var i=0;i<jsonArr.length;i++) {
                    otherDiv.innerHTML = jsonArr[i].msg;
                    document.querySelector('.content').appendChild(otherDiv);
                }
            });*/

            var otherDiv = document.createElement('div');
            otherDiv.classList.add('other');
            otherDiv.innerHTML = '哈哈哈';
            document.querySelector('.content').appendChild(otherDiv);
        };
    </script>
</body>
</html>